<template>
    <div>
        <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
<!--            <a-form-item-->
<!--                    label="账号名"-->
<!--                    :labelCol="{span: 5}"-->
<!--                    :wrapperCol="{span: 19}"-->
<!--            >-->
<!--                <a-input-->
<!--                        type="text"-->
<!--                        autocomplete="false" :value="accountName" disabled>-->
<!--                </a-input>-->
<!--            </a-form-item>-->
            <a-form-item
                    label="新密码"
                    :labelCol="{span: 5}"
                    :wrapperCol="{span: 19}"
                    class="stepFormText">
                <a-input
                        v-decorator="['password',validatorRules.password]"
                        type="password"
                        autocomplete="false">
                </a-input>
            </a-form-item>
            <a-form-item
                    label="确认密码"
                    :labelCol="{span: 5}"
                    :wrapperCol="{span: 19}"
                    class="stepFormText">
                <a-input
                        v-decorator="['confirmPassword',validatorRules.confirmPassword]"
                        type="password"
                        autocomplete="false">
                </a-input>
            </a-form-item>
            <a-form-item :wrapperCol="{span: 19, offset: 5}">
                <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
                <a-button :loading="loading" type="primary" @click="nextStep" style="margin-left:20px">提交</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import { resetPassword } from '../../../api/sms'

    export default {
        name: 'Step3',
        props: ['userList'],
        data() {
            return {
                loading: false,
                form: this.$form.createForm(this),
                // accountName: this.userList.username,
                validatorRules: {
                    // username: { rules: [{ required: true, message: '用户名不能为空!' }] },
                    password: {
                        rules: [{
                            required: true,
                            pattern: /^[0-9a-zA-Z]{6,32}$/,
                            message: '密码输入6-32位字符!'
                        }, { validator: this.handlePasswordLevel }]
                    },
                    confirmPassword: {
                        rules: [{
                            required: true,
                            message: '密码不能为空!'
                        }, { validator: this.handlePasswordCheck }]
                    }
                }
            }
        },
        methods: {
            nextStep() {
                let that = this
                that.loading = true
                this.form.validateFields(async (err, values) => {
                    if (!err) {
                        let params = {
                            phone : this.userList.phone,
                            smscode : this.userList.smscode,
                            password : values.password,
                        }
                        let res = await resetPassword(params);
                        if (res && res.success) {
                            let userList = {
                                username: this.userList.username
                            }
                            setTimeout(function() {
                                that.$emit('nextStep', userList)
                            }, 1500)
                        } else {
                            this.passwordFailed(res.message)
                            that.loading = false
                        }
                    } else {
                        that.loading = false
                    }
                })

            },
            prevStep() {
                this.$emit('prevStep', this.userList)
            },
            handlePasswordCheck(rule, value, callback) {
                let password = this.form.getFieldValue('password')
                if (value && password && value.trim() !== password.trim()) {
                    callback(new Error('两次密码不一致'))
                }
                callback()
            },
            passwordFailed(err) {
                this.$notification['error']({
                    message: '更改密码失败',
                    description: err,
                    duration: 4
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .stepFormText {
        margin-bottom: 24px;
    }

    .ant-form-item-label,
    .ant-form-item-control {
        line-height: 22px;
    }

</style>
